import { VFC, useRef, useEffect, useState } from "react";
import style from './process-bar.module.less';
// const style: any = {};
export const ProcessBar: VFC<{value: number, total: number, bgColor?: string; barColor?: string}> = (props) => {
    const { bgColor = 'rgb(187, 185, 185)', barColor = 'rgb(52, 202, 97)'} = props;
    const [barWidth, setBarWidth] = useState(0);
    const barContainerRef: any = useRef();
    useEffect(() => {
        if(!barContainerRef.current) return;
        let ele: HTMLElement = barContainerRef.current;
        let width = ele.clientWidth;
        setBarWidth(props.value / props.total * width);
    },[barContainerRef.current, props.value, props.total]);
    return (
        <div className={style.container}>
            <div ref={barContainerRef} className={style.barContainer} style={{backgroundColor: bgColor}}>
                <div className={style.bar} style={{backgroundColor: barColor, width: barWidth}}></div>
                <div className={style.percent}>
                    {(props.value/props.total*100).toFixed(2)}%
                </div>
            </div>
            <div className={style.value} >{props.value}/{props.total}</div>
        </div>
    );
}